<template>
  <el-container>
    <el-header>
      <el-form ref="jobForm" :model="jobForm" :inline="true" class="demo-form-inline">
        <el-col :span="3">
          <el-form-item>
            <el-input placeholder="关键词" v-model="jobForm.search_word"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-cascader
                placeholder="地区"
                v-model="jobForm.city"
                :options="options.CityOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
              <template slot-scope="{ node }">
                <i class="iconfont icon-fenlei-remen" v-if="node.data.label==='热门'" style="color: red"></i>
                {{ node.label }}
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select
                placeholder="要求学历"
                :props="{ expandTrigger: 'hover'}"
                clearable
                v-model="jobForm.education"
                filterable>
              <el-option
                  v-for="item in options.EducationOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-cascader
                placeholder="职业筛选"
                v-model="jobForm.position"
                :options="options.PositionOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select
                placeholder="工作经验"
                v-model="jobForm.work_exp"
                :props="{ expandTrigger: 'hover'}"
                clearable
                filterable>
              <el-option
                  v-for="item in options.WorkExperienceOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>

            <el-select
                placeholder="工作类型"
                v-model="jobForm.work_type"
                :props="{ expandTrigger: 'hover'}"
                clearable
                filterable>
              <el-option
                  v-for="item in options.WorkTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="getJobs" :loading="loadings.buttonLoading">查询</el-button>
          </el-form-item>
        </el-col>


      </el-form>
    </el-header>
    <el-main>
      <el-table
          v-loading="loadings.tableLoading"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="ID"
            width="50">
        </el-table-column>
        <el-table-column
            prop="label"
            label="工作标题"
            width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="城市"
            width="120">
        </el-table-column>
        <el-table-column
            prop="salary"
            label="薪资范围"
            width="150">
        </el-table-column>
        <el-table-column
            label="标签"
            width="300">
          <template v-slot:default="scope">
            <el-tag size="mini" v-for="label in scope.row.skill_label" style="margin-left: 5px">{{ label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="education"
            label="学历"
            width="60">
        </el-table-column>
        <el-table-column
            prop="work_exp"
            label="工作经验"
            width="60">
        </el-table-column>
        <el-table-column
            prop="work_type"
            label="类型"
            width="60">
        </el-table-column>
        <el-table-column
            prop="company.name"
            label="公司名称"
            width="250">
        </el-table-column>
        <el-table-column
            prop="company.size"
            label="公司规模"
            width="120">
        </el-table-column>
        <el-table-column
            prop="company.type"
            label="公司类型"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template v-slot:default="scope">
            <el-button type="text" size="small" @click="getJobDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.page"
          layout="total, prev, pager, next, jumper"
          :total=pageInfo.dataTotal
          :page-size="pageInfo.pageSize"
      >
        :page-count=pageInfo.pageTotal>
      </el-pagination>
    </el-footer>
  </el-container>


</template>

<script>

export default {
  name: "JobTable",
  components: {},
  data() {
    return {
      loadings: {
        buttonLoading: false,
        tableLoading: false,
      },
      tableData: [],
      pageInfo: {
        pageSize: 20,
        pageTotal: 0,
        dataTotal: 0,
        page: 1
      },
      jobForm: {
        search_word: "",
        city: "",
        education: "",
        work_exp: "",
        position: "",
        work_type: "",
        page: 1,
      },
      options: {
        WorkExperienceOption: [],
        EducationOption: [],
        PositionOption: [],
        WorkTypeOption: [],
        CityOption: []
      }
    }
  },
  watch: {
    'pageInfo.page': {
      immediate: true,
      // 定义deep=true,使用深度监控属性
      deep: true,
      handler(newValue, oldValue) {
        console.log('数据变化!,new:', newValue, 'old:', oldValue)
        this.jobForm.page = newValue
      }
    }
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.pageInfo.page = pageNum
      this.jobForm.page = pageNum
      console.log(`当前pageInfo:${this.pageInfo.page},当前jobForm:${this.jobForm.page}`)
      this.getJobsBase()
    },
    getJobDetail(job) {
      this.$router.push({"name": "JobDetail", params: {jobId: job.id}})
    },

    getJobsBase(params = {params: this.jobForm}) {
      this.loadings.tableLoading = true
      return this.$api.getJobs(params).then(rep => {
        this.tableData = rep.data.data
        this.pageInfo.dataTotal = rep.data.links.data_total
        this.pageInfo.pageTotal = rep.data.links.page_total
        console.log(this.pageInfo.pageTotal)
      }).catch(reason => {
        let error_message = reason.response.status === 500 ? '查询失败,服务器出错!' : reason.response.data.message
        this.$message.error({
          duration: 800,
          message: error_message
        })
      }).finally(() => {
            setTimeout(() => this.loadings.tableLoading = false, 500)
          }
      )
    },

    getJobs() {
      this.pageInfo.page = 1
      this.loadings.buttonLoading = true
      this.getJobsBase().finally(() => {
            setTimeout(() => {
              this.loadings.buttonLoading = false
            }, 500)
          }
      )
    },
    getGenericsSelect() {
      for (let key of Object.keys(this.options)) {
        this.$api.getGenericSelect({params: {"type": key.replace('Option', '')}}).then(rep => {
          this.options[key] = rep.data
        })
      }
    },
  },
  beforeMount() {
    this.getGenericsSelect();
    this.getJobsBase({params: null})
  }
}
</script>

